{% extends 'admin/public/base.html' %}


{% block con-header %}
<div class="container-fluid am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
            <div class="page-header-heading">
                <span class="am-icon-home page-header-heading-icon"></span>
                商品添加
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block con-footer %}
<div class="row-content am-cf">
	<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
	    <div class="widget am-cf">
	        <div class="widget-head am-cf">
	            <div class="widget-title am-fl">用户信息</div>
	            <div class="widget-function am-fr">
	                <!-- <a href="javascript:;" class="am-icon-cog"></a> -->
	            </div>
	        </div>
	        <div class="widget-body am-fr">

	            <form class="am-form tpl-form-line-form" action="{% url 'admin_goods_insert' %}" method="post" enctype="multipart/form-data">
	            	<!-- 所属分类 -->
	                <div class="am-form-group">
	                    <label for="user-name" class="am-u-sm-3 am-form-label">
	                    	所属分类
	                    </label>
						<select name="typeid" data-am-selected="{btnSize: 'sm'}">
							{% for v in tlist %}
							{% if v.pid == 0 %}
							<option disabled  value="{{ v.id }}">{{ v.name }}</option>
							{% else %}
							<option value="{{ v.id }}">{{ v.name }}</option>
							{% endif %}
							{% endfor %}
						</select>
	                </div>
	                <!-- 商品标题 -->
	                <div class="am-form-group">
	                    <label for="user-name" class="am-u-sm-3 am-form-label">
	                    	商品标题
	                    </label>
	                    <div class="am-u-sm-9">
	                        <input type="text" class="tpl-form-input" id="user-name" placeholder="请输入商品标题" name="title">
	                    </div>
	                </div>
	                <!-- 商品价格 -->
	                <div class="am-form-group">
	                    <label for="user-name" class="am-u-sm-3 am-form-label">
	                    	商品价格
	                    </label>
	                    <div class="am-u-sm-9">
	                        <input type="text" class="tpl-form-input" id="user-name" placeholder="请输入商品价格最高999999.99" name="price">
	                    </div>
	                </div>
	                <!-- 商品库存 -->
	                <div class="am-form-group">
	                    <label for="user-name" class="am-u-sm-3 am-form-label">
	                    	商品库存
	                    </label>
	                    <div class="am-u-sm-9">
	                        <input type="text" class="tpl-form-input" id="user-name" placeholder="请输入商品库存数量" name="storage">
	                    </div>
	                </div>
	                <!-- 商品图片 -->
	                <div class="am-form-group">
	                    <label for="user-weibo" class="am-u-sm-3 am-form-label">商品图片
	                    </label>
	                    <div class="am-u-sm-9">
	                        <div class="am-form-group am-form-file">
	                            <div class="tpl-form-file-img">
	                                <img src="/static/pics/default/default.ico" alt="" id="filepicurl">
	                            </div>
	                            <button type="button" class="am-btn am-btn-danger am-btn-sm">
									<i class="am-icon-cloud-upload"></i> 添加上传图片
								</button>
	                            <input id="doc-form-file" type="file" multiple="" name="pic">
	                        </div>
	                    </div>
	                </div>
	                <!-- ajax上传图片 -->
	                <script type="text/javascript">
	                	// ajax文件上传
	                	$('#doc-form-file').change(function(){
	                		// 创建一个表单对象
	                		var form = new FormData()
	                		// 获取当前选择的文件
	                		file = this.files[0]
	                		// 把当前的文件添加到表单对象中
	                		form.append('pic',file)
	                		form.append('csrfmiddlewaretoken','{{ csrf_token }}')
	                		// 发送ajax
	                		$.ajax({
	                			// 请求地址
	                			url : '{% url "admin_ajax_upload" %}',
	                			type : 'POST',
	                			data : form,
	                			processData:false,//设置ajax不处理发送的数据
	                			contentType:false,//不去设置context-Type 请求头
	                			async:true,//异步请求
	                			success:function(data){
	                				// 判断文件是否上传成功
	                				if (data['code'] == 0){
	                					// 把上传的图片动态加载到页面中
	     
	                					$('#filepicurl').attr('src',data['url'])

	                					// 把上传的图片的路径，添加到表单中
	                					$('input[name=pic]').val(data['url'])
	

	                				}else{
	                					alert(data['msg'])
	                				}
	                			}
	                		},'json');

	                	});

	                </script>
	                <!-- 商品详情 -->
					<link rel="stylesheet" type="text/css" href="/ueditor/UE/third-party/SyntaxHighlighter/shCoreDefault.css">
					<script type="text/javascript" src="/ueditor/UE/third-party/SyntaxHighlighter/shCore.js"></script>
					<script type="text/javascript" src="/ueditor/UE/ueditor.config.js"></script>
					<script type="text/javascript" src="/ueditor/UE/ueditor.all.min.js"></script>
					<script type="text/javascript" src="/ueditor/UE/lang/zh-cn/zh-cn.js"></script>
	                <div class="am-form-group">
						<label for="user-name" class="am-u-sm-3 am-form-label">
							商品详情
	                    </label>
	                    <div class="am-u-sm-9">
	                       <script id="editor" name="info" type="text/plain" style="height:300px;">
	                       </script>
	                    </div>
	                </div>
					<script type="text/javascript">
						var ue = UE.getEditor('editor');
						SyntaxHighlighter.all();
					</script>


					{% csrf_token %}
					
	                <div class="am-form-group">
	                    <div class="am-u-sm-9 am-u-sm-push-3">
	                        <button  class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交</button>
	                    </div>
	                </div>

	            </form>
	        </div>
	    </div>
	</div>





</div>
{% endblock %}